<template>
  <view class="grid grid-cols-3 p-3 rounded my-1" :class="[bgColor]">
    <view class="col-span-1 flex items-center justify-center">
      <view v-if="leftLabel" class="text-white">
        {{ leftLabel }}
      </view>
      <view v-else>
        <slot name="left"></slot>
      </view>
    </view>
    <view class="col-span-2 flex justify-center">
      <slot></slot>
    </view>

  </view>
</template>

<script setup lang="ts">

defineProps({
  leftLabel: {
    type: String,
    default: ''
  },
  bgColor: {
    type: String,
    default: 'bg-amber-400'
  }
})

</script>

<style scoped>

</style>